<template>
	<view :class="[config.style]">
		<view class="address-edit-section">
			<view class="item name">
				<view class="title">姓名</view>
				<view class="input">
					<input type="text" v-model="name" placeholder="请输入姓名" class="input" @input="inputChange" />
				</view>
			</view>
			<view class="item phone">
				<view class="title">手机号</view>
				<view class="input">
					<input type="number" v-model="phone" placeholder="请输入收货手机号" class="input" @input="inputChange" />
				</view>
			</view>
			<view class='item choose-area'>
				<view class="title">选择地区</view>
				<view class="input">
					<AddressPicker @change="changeAddress" :level="3">{{planLocate}}</AddressPicker>
				</view>
			</view>
			<view class="item address">
				<view class="title">详细地址</view>
				<view class="input">
					<input type="text" v-model="address" placeholder="请输入详细地址" class="input" @input="inputChange" />
				</view>
			</view>
		</view>
		
		<!--确认保存收货地址-->
		<view class="address-add">
			<button type="default" class="add-btn" hover-class="add-btn-hover" @click="addAddress()">保存收货地址</button>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	//全屏加载中
	import FullscreenLoading from '@/components/muu-fullscreen-loading/muu-fullscreen-loading.vue'
	import AddressPicker from "@/components/address-picker/AddressPicker.vue"
	export default {
		components: {
			FullscreenLoading,
			AddressPicker
		},
		data() {
			return {
				loading: true, //加载中
				urlParams: {}, //url参数
				planLocate:'请输入所在地区',
				id: 0,
				name: '', //姓名
				phone: '', //手机号
				pos_province: '', //省份
				pos_city: '', //城市
				pos_district: '', //区、镇
				pos_array: [],
				address: '', //详细地址
				first: 1, //是否默认地址
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			this.getUrlParam(option)
		},
		created() {

		},
		computed: {
			...mapState(['config'])
		},
		methods: {
			
			inputChange(e){
				this.value = e.detail.value
			},

			//获取url参数
			getUrlParam: function(){
				// #ifdef MP-WEIXIN
				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let curRoute = routes[routes.length - 1].route //获取当前页面路由
				let curParam = routes[routes.length - 1].options; //获取路由参数
				// #endif
			
				// #ifdef H5
				let curParam = this.$route.query;
				// #endif
				this.urlParams = curParam
				//存在参数ID，即编辑地址，获取需编辑地址数据
				if(curParam.id > 0){
					this.getData()
				}
			},
			
			/**
			 * 获取编辑的地址数据
			 */
			getData: function(){
				let that = this
				let params = this.urlParams
				let data = {}
					data.action = 'detail'
					data.id = params.id
					
				//获取首页数据
				let url = ''
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/address'
					//#endif
					//#ifdef H5
					url = 'entry/site/address'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							that.id = res.data.data.id
							that.name = res.data.data.name
							that.phone = res.data.data.phone
							that.pos_province = res.data.data.pos_province
							that.pos_city = res.data.data.pos_city
							that.pos_district = res.data.data.pos_district
							that.planLocate = res.data.data.pos_province + ' ' + res.data.data.pos_city + ' ' + res.data.data.pos_district
							that.address = res.data.data.address
						}
					}
				})
			},
			
			//父组件的获取子组件传递的值
			changeAddress: function(result) {
				//console.log(JSON.stringify(result.data));
				this.planLocate = ''; 
				result.data.forEach( (item,index) =>{
				if(index === 0){
					this.planLocate += item.name
				}else{
					this.planLocate += ' ' +item.name  
				}
				}) ;
				let arr = this.planLocate.split(' ');
				console.log(arr)
				this.pos_province = arr[0]
				this.pos_city = arr[1]
				this.pos_district = arr[2]
			},
			
			/**
			 * 保存提交数据
			 */
			addAddress: function(){
				let that = this				
				let data = {}
					data.action = 'edit'
					data.id = that.id
					data.name = that.name
					data.phone = that.phone
					data.pos_province = that.pos_province
					data.pos_city = that.pos_city
					data.pos_district = that.pos_district
					data.address = that.address
				let url = ''
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/address'
					//#endif
					//#ifdef H5
					url = 'entry/site/address'
					//#endif
				this.util.request({
					url : url,
					data: data,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success : function(res) {
						console.log(res)
						uni.showToast({
						    title: res.data.msg,
							icon: 'none',
							position: 'bottom',
						    duration: 2000
						});
						
						if(res.data.code == 200){
							console.log(res.data)
							uni.showToast({
							    title: res.data.msg,
								icon: 'none',
								position: 'bottom',
							    duration: 2000
							});
							uni.navigateBack()
						}
					},
					fail : function(res){
						uni.showModal({
						    title: '提示',
						    content: '发生错误，请稍后再试~',
						    success: function (res) {
						        if (res.confirm) {
						            //console.log('用户点击确定');
						        } else if (res.cancel) {
						            //console.log('用户点击取消');
						        }
						    }
						})
					},
				})
			}
		}
	}
</script>

<style lang="scss">
	.address-edit-section {
		.item {
			display: flex;
			margin: 40rpx 0;
			.title {
				width: 140rpx;
				font-size: 28rpx;
				text-align: right;
				color: #666;
				line-height: 44rpx;
			}
			.input {
				flex: 1;
				font-size: 28rpx;
				padding: 0 10rpx;
				line-height: 44rpx;
				height: 44rpx;
			}
		}
	}
	
	.address-add {
		padding: 20rpx 40rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		.add-btn {
			display: block;
			border-radius: 10rpx;
			color: #fff;
		}
		.add-btn-hover {
			
		}
	}
	
	/*页面风格设计*/
	.Blue {
		.address-add {
			.add-btn {
				background-color: $Blue;
			}
			.add-btn-hover {
				background-color: $Blue-hover;
			}
		}
	}
	.Green {
		.address-add {
			.add-btn {
				background-color: $Green;
			}
			.add-btn-hover {
				background-color: $Green-hover;
			}
		}
	}
	.LightRed {
		.address-add {
			.add-btn {
				background-color: $LightRed;
			}
			.add-btn-hover {
				background-color: $LightRed-hover;
			}
		}
	}
	.Orange {
		.address-add {
			.add-btn {
				background-color: $Orange;
			}
			.add-btn-hover {
				background-color: $Orange-hover;
			}
		}
	}
	.LightPink {
		.address-add {
			.add-btn {
				background-color: $LightPink;
			}
			.add-btn-hover {
				background-color: $LightPink-hover;
			}
		}
	}
	.Magenta {
		.address-add {
			.add-btn {
				background-color: $Magenta;
			}
			.add-btn-hover {
				background-color: $Magenta-hover;
			}
		}
	}
</style>
